<template>
  <div class="p-4">
    <div v-for="category in categories" :key="category.id" class="mb-12">
      <h2 class="text-2xl font-black mb-4 text-gray-900 relative pl-4 
        before:absolute before:left-0 before:top-1.5 before:w-1.5 before:h-6
        before:bg-gradient-to-b before:from-blue-400 before:to-blue-500
        before:rounded-lg
        after:content-[''] after:absolute after:-bottom-2 after:left-0 
        after:w-20 after:h-[2px] after:bg-gradient-to-r after:from-blue-400/80 after:to-transparent
        hover:before:from-blue-500 hover:before:to-blue-600
        transition-colors duration-300">
        <span class="relative z-10 bg-clip-text text-transparent 
          bg-gradient-to-r from-gray-900 via-gray-800 to-gray-700
          drop-shadow-[0_2px_8px_rgba(147,197,253,0.15)]
          hover:drop-shadow-[0_4px_12px_rgba(147,197,253,0.25)]
          transition-all duration-300">
          {{ category.title }}
        </span>
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div 
          v-for="tool in category.tools" 
          :key="tool.id" 
          class="group relative bg-white/95 
            backdrop-blur-sm rounded-lg p-3 transition-all duration-300 
            hover:-translate-y-0.5 hover:shadow-lg
            border border-gray-100/80 hover:border-gray-200
            shadow-sm hover:shadow-lg
            before:absolute before:inset-0 before:rounded-lg before:z-0
            before:bg-[length:300%_300%] before:bg-gradient-to-r 
            before:from-transparent before:via-blue-100/30 before:to-transparent
            before:opacity-0 before:transition-opacity before:duration-300
            hover:before:opacity-100 hover:before:animate-light-sweep">

          <div class="relative z-10 flex flex-col h-full">
            <div class="flex items-center mb-2">
              <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-white 
                p-1 mr-3 transition-all group-hover:scale-[1.05]
                border border-gray-200/80
                hover:border-blue-200/80
                shadow-[inset_0_1px_3px_rgba(0,0,0,0.03),0_1px_1px_rgba(0,0,0,0.04)]
                hover:shadow-[0_0_0_2px_rgba(147,197,253,0.15)]">
                <img 
                  :src="tool.logo || logoURL" 
                  alt="Logo" 
                  class="w-full h-full object-contain transition-transform 
                    duration-300 hover:scale-105"
                >
              </div>
              <h3 class="text-[14px] font-semibold text-gray-800 tracking-tight">
                {{ tool.title }}
              </h3>
            </div>
            
            <p class="text-[13px] text-gray-600/90 mb-2 leading-snug line-clamp-2 
              overflow-hidden break-words flex-grow">
              {{ tool.description }}
            </p>
            
            <div class="flex items-center justify-between h-7">
              <div class="flex items-center">
                <span class="text-red-400 hover:text-red-600 transition-colors cursor-pointer text-[15px]">❤️</span>
                <span class="text-gray-600/90 ml-1 font-medium text-[11px]">
                  {{ tool.likes || '0' }} 次
                </span>
              </div>
              <div class="text-[11px] px-2 py-0.5 rounded-md bg-gradient-to-r from-blue-50 to-blue-100 
                text-blue-800 hover:from-blue-100 hover:to-blue-200 transition-all cursor-pointer 
                shadow-xs hover:shadow-sm border border-blue-200/20">
                体验
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const logoURL = 'https://deepseek.net/assets/img/logo-article.svg'; // 使用提供的 logo URL

const categories = ref([
  {
    id: 'ai_chat',
    title: 'AI智能对话',
    tools: [
      { id: 'chat', title: '智能对话', description: '基于深度学习的自然语言处理模型，支持多轮对话和上下文理解，提供更人性化的交互体验', likes: 3281, logo: logoURL },
      { id: 'search', title: '知识搜索', description: '整合全网优质知识资源，通过语义分析实现精准搜索，快速定位所需信息', likes: 2450, logo: logoURL },
      { id: 'kimi', title: 'Kimi', description: '智能对话助手', likes: 1500, logo: logoURL },
      { id: 'deepseek', title: 'DeepSeek', description: '深度搜索助手', likes: 2100, logo: logoURL },
      { id: 'gpt3', title: 'GPT-3', description: '强大的语言模型', likes: 4000, logo: logoURL },
      { id: 'chatbot', title: '聊天机器人', description: '多功能聊天机器人', likes: 3200, logo: logoURL },
      { id: 'virtual_assistant', title: '虚拟助手', description: '智能个人助手', likes: 1800, logo: logoURL },
      { id: 'sentiment_analysis', title: '情感分析', description: '情感识别与分析工具', likes: 900, logo: logoURL },
      { id: 'language_model', title: '语言模型', description: '多语言支持的对话模型', likes: 1200, logo: logoURL },
      { id: 'contextual_chat', title: '上下文对话', description: '基于上下文的智能对话', likes: 1100, logo: logoURL },
      { id: 'faq_bot', title: 'FAQ机器人', description: '常见问题解答机器人', likes: 1500, logo: logoURL },
      { id: 'voice_chat', title: '语音对话', description: '语音识别与对话系统', likes: 2000, logo: logoURL },
    ],
  },
  {
    id: 'office',
    title: '办公助手',
    tools: [
      { id: 'office', title: '办公助手', description: '智能文档处理与办公自动化', likes: 3000, logo: logoURL },
      { id: 'legal', title: '法律助手', description: '专业的法律咨询与文书处理', likes: 2500, logo: logoURL },
      { id: 'meeting_scheduler', title: '会议调度', description: '智能会议安排', likes: 1800, logo: logoURL },
      { id: 'email_manager', title: '邮件管理', description: '智能邮件分类与回复', likes: 2200, logo: logoURL },
      { id: 'task_manager', title: '任务管理', description: '高效的任务管理工具', likes: 2700, logo: logoURL },
    ],
  },
  {
    id: 'translation',
    title: '翻译助手',
    tools: [
      { id: 'translate', title: '智能翻译', description: '多语言实时翻译与本地化' },
      { id: 'text_translator', title: '文本翻译', description: '快速文本翻译工具' },
      { id: 'voice_translator', title: '语音翻译', description: '实时语音翻译助手' },
    ],
  },
  {
    id: 'writing',
    title: '创作助手',
    tools: [
      { id: 'writing', title: '创作助手', description: '智能写作与内容创作辅助' },
      { id: 'story_generator', title: '故事生成器', description: '自动生成故事情节' },
      { id: 'grammar_checker', title: '语法检查', description: '智能语法和拼写检查工具' },
    ],
  },
  {
    id: 'image',
    title: '图像处理',
    tools: [
      { id: 'image', title: '图像处理', description: 'AI图像生成与智能处理' },
      { id: 'photo_editor', title: '照片编辑', description: '智能照片编辑工具' },
      { id: 'image_recognition', title: '图像识别', description: 'AI图像识别与分类' },
    ],
  },
  {
    id: 'audio',
    title: '语音助手',
    tools: [
      { id: 'audio', title: '语音助手', description: '语音识别与音频处理' },
      { id: 'voice_recorder', title: '语音录音', description: '高质量语音录音工具' },
      { id: 'audio_editor', title: '音频编辑', description: '智能音频编辑工具' },
    ],
  },
  {
    id: 'video',
    title: '视频工具',
    tools: [
      { id: 'video', title: '视频工具', description: '智能视频编辑与处理' },
      { id: 'video_converter', title: '视频转换器', description: '多格式视频转换工具' },
      { id: 'video_analyzer', title: '视频分析', description: '智能视频内容分析' },
    ],
  },
  {
    id: 'vr',
    title: '虚拟现实',
    tools: [
      { id: 'vr', title: '虚拟现实', description: 'VR内容创作与体验' },
      { id: 'vr_game', title: 'VR游戏', description: '沉浸式VR游戏体验' },
      { id: 'vr_training', title: 'VR培训', description: '虚拟现实培训解决方案' },
    ],
  },
  {
    id: 'data',
    title: '数据分析',
    tools: [
      { id: 'data', title: '数据分析', description: '智能数据处理与可视化' },
      { id: 'data_visualization', title: '数据可视化', description: '动态数据可视化工具' },
      { id: 'data_mining', title: '数据挖掘', description: '智能数据挖掘与分析' },
    ],
  },
  {
    id: 'code',
    title: '代码助手',
    tools: [
      { id: 'code', title: '代码助手', description: '智能编程辅助与代码生成' },
      { id: 'debugger', title: '调试工具', description: '高效的代码调试工具' },
      { id: 'code_optimizer', title: '代码优化', description: '智能代码优化助手' },
    ],
  },
]);
</script>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}
</style> 